<template>
  <el-dialog
    title="焊接波形"
    :visible.sync="dialogVisible"
    width="1000px">
    <div id="main" style="width:100%;height: 600px;" ref="main">

    </div>
<!--    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="80px">-->
  </el-dialog>
</template>

<script>
import $ from 'jquery'
import * as echarts from 'echarts';
export default {
  name: 'wmhistorypop',
  data(){
    return {
      dataForm: {
        key: ''
      },
      datajson: [],
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      addOrUpdateVisible: false,
      Visiable: false,
      dialogVisible:false,
      aa: false,
      area: {
        area1: ''
      }
    }
  },
  mounted () {
   this.test()
  },
  methods:{
    test(){
      this.$http({
        url: this.$http.adornUrl('/equipinfo/equipinfotable/num'),
        method: 'get'
      }).then(({data}) => {
        var myChart1 = echarts.init(document.getElementById('main'));
// 绘制图表
        myChart1.setOption({
          'title': {
            'text': '焊机数据'
          },
          'tooltip': {
            'trigger': 'axis'
          },
          'legend': {
            'data': [ '电压', '电流', '送丝速度' ]
          },
          'grid': {
            'left': '3%',
            'right': '4%',
            'bottom': '3%',
            'containLabel': true
          },
          'toolbox': {
            'feature': {
              'saveAsImage': { }
            }
          },
          'xAxis': {
            'type': 'category',
            'boundaryGap': false,
            'axisTick': {
              alignWithLabel: true
            },
            'data': [
              '2023-04-21 10:10:10',
              '2023-04-21 10:10:11',
              '2023-04-21 10:10:12',
              '2023-04-21 10:10:13',
              '2023-04-21 10:10:14',
              '2023-04-21 10:10:15',
              '2023-04-21 10:10:16',
              '2023-04-21 10:10:17',
              '2023-04-21 10:10:18',
              '2023-04-21 10:10:19',
              '2023-04-21 10:10:20',
              '2023-04-21 10:10:21',
              '2023-04-21 10:10:22',
              '2023-04-21 10:10:23',
              '2023-04-21 10:10:24',
              '2023-04-21 10:10:25',
              '2023-04-21 10:10:26',
              '2023-04-21 10:10:27'
            ]
          },
          // 'yAxis': {
          //   'type': 'value'
          // },
          'yAxis': [
            {
              type: 'value',
              name: '电流',
              position: 'left',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#5470c6'
                }
              },
              axisLabel: {
                formatter: '{value} A'
              }
            },
            {
              type: 'value',
              name: '电压',
              position: 'right',
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#91CC75'
                }
              },
              axisLabel: {
                formatter: '{value} V'
              }
            },
            {
              type: 'value',
              name: '送丝',
              position: 'right',
              offset: 60,
              alignTicks: true,
              axisLine: {
                show: true,
                lineStyle: {
                  color: '#EE6666'
                }
              },
              axisLabel: {
                formatter: '{value} m/min'
              }
            }
          ],
          'series': [
            {
              'name': '电压',
              'type': 'line',
              'smooth': true,
              // 单独修改当前线条的样式
              lineStyle: {
                color: "#0184d5",
                width: "2"
              },
              'stack': '总量',
              'data': [ 120, 132, 101, 134, 90, 230, 210, 200, 205, 203, 155, 124, 168, 107, 101, 134, 90, 230]
            },
            {
              'name': '电流',
              'type': 'line',
              'smooth': true,
              // 单独修改当前线条的样式
              lineStyle: {
                color: "#0184d5",
                width: "2"
              },
              'stack': '总量',
              'data': [ 220, 182, 191,101, 134, 90, 230, 210, 200, 234, 290, 330, 310, 120, 132, 101, 134, 90,]
            },
            {
              'name': '送丝速度',
              'type': 'line',
              'smooth': true,
              // 单独修改当前线条的样式
              lineStyle: {
                color: "#0184d5",
                width: "2"
              },
              'stack': '总量',
              'data': [ 500, 520, 503, 516, 560, 543, 500,501, 534, 510, 500, 534, 590,520, 582, 591,501, 534]
            }
          ]
        });
      })
    },
//     test(){
//       this.$http({
//         url: this.$http.adornUrl('/emp/employee/num'),
//         method: 'get'
//       }).then(({data}) => {
//         var yearData = [
//           {
//             year: "2020", // 年份
//             data: [
//               // 两个数组是因为有两条线
//               [24, 90, 15, 180, 90, 220, 210, 10, 60, 250, 150, 30],
//               // [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
//             ]
//           },
//           {
//             year: "2021", // 年份
//             data: [
//               // 两个数组是因为有两条线
//               [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38],
//               // [143, 131, 165, 123, 178, 21, 82, 64, 43, 60, 19, 34]
//             ]
//           }
//         ];
//         // console.log(data[0].actor)
//         // 基于准备好的dom，初始化echarts实例
//         var myChart1 = echarts.init(document.getElementById('main'));
// // 绘制图表
//         var option = {
//           title: {
//             text: '电流历史数据'
//           },
//           // 通过这个color修改两条线的颜色  , "#ed3f35"
//           color: ["#6FEEEF"],
//           tooltip: {
//             trigger: "axis"
//           },
//           legend: {
//             // 如果series 对象有name 值，则 legend可以不用写data
//             // 修改图例组件 文字颜色
//             textStyle: {
//               color: "#4c9bfd"
//             },
//             // 这个10% 必须加引号
//             right: "10%"
//           },
//           grid: {
//             top: "20%",
//             left: "3%",
//             right: "4%",
//             bottom: "3%",
//             // show: true, // 显示边框
//             borderColor: "#012f4a", // 边框颜色
//             containLabel: true // 包含刻度文字在内
//           },
//
//           xAxis: {
//             type: "category",
//             // type: "time",
//             boundaryGap: false,
//             data: [
//               "11:41",
//               "11:42",
//               "11:43",
//               "11:44",
//               "11:45",
//               "11:46",
//               "11:47",
//               "11:48",
//               "11:49",
//               "11:50",
//               "11:51",
//               "11:52"
//             ],
//             axisTick: {
//               show: false // 去除刻度线
//             },
//             axisLabel: {
//               color: "#4c9bfd" // 文本颜色
//             },
//             axisLine: {
//               show: false // 去除轴线
//             }
//           },
//           yAxis: {
//             type: "value",
//             axisTick: {
//               show: false // 去除刻度线
//             },
//             axisLabel: {
//               color: "#4c9bfd" // 文本颜色
//             },
//             axisLine: {
//               show: false // 去除轴线
//             },
//             splitLine: {
//               lineStyle: {
//                 color: "#012f4a" // 分割线颜色
//               }
//             }
//           },
//           series: [
//             {
//               // name: "新增粉丝",
//               type: "line",
//               // true 可以让我们的折线显示带有弧度
//               smooth: true,
//               data: yearData[0].data[0]
//             },
//             {
//               // name: "新增游客",
//               type: "line",
//               smooth: true,
//               data: yearData[0].data[1]
//             }
//           ]
//         };
//         myChart1.setOption(option);
//
//         //测试
//         $("#preButton").on("click",function (){
//           console.log($(this).index());
//           console.log(yearData[$(this).index()]);
//           var obj = yearData[$(this).index()+1];
//           option.series[0].data = obj.data[0];
//           console.log(yearData[$(this).index()+1])
//           console.log(option.series[1].data)
//           myChart1.setOption(option);
//         })
//         //
//         $("#nextButton").on("click",function (){
//           console.log($(this).index()-1);
//           //console.log(yearData[$(this).index()-2]);
//           var obj = yearData[$(this).index()-2];
//           option.series[0].data = obj.data[0];
//           console.log(obj.data[0])
//           myChart1.setOption(option);
//         })
//         // 5.点击切换效果
//         // $(".line h2").on("click", "a", function() {
//         //   // alert(1);
//         //    console.log($(this).index());
//         //   // 点击 a 之后 根据当前a的索引号 找到对应的 yearData的相关对象
//         //   // console.log(yearData[$(this).index()]);
//         //   var obj = yearData[$(this).index()];
//         //   //console.log(obj)
//         //   option.series[0].data = obj.data[0];
//         //   option.series[1].data = obj.data[1];
//         //   // 需要重新渲染
//         //   myChart1.setOption(option);
//         // });
//       })
//     },
    init(wname,startTime,endTime){
      this.dialogVisible = true;
      console.log('设备名称：' + wname)
      console.log('开始时间：' + startTime)
      console.log('结束时间：' + endTime)
      // console.log('子组件ename为' + ename)
      this.dataListLoading = false
      }
    },
  destroyed() {
         clearInterval(this.interval);
       },
}
</script>

<style scoped>

</style>
